<template>
  <div class="movies_container">
    <div class="movie_list">
      <div @tap='toMovieDetail(index)' class="movie_list_item" v-for="(item,index) in movieList" :key="index">
        <div class="item_left">
          <img
            :src="item.images.large"
            :alt="item.title"
          >
        </div>
        <div class="item_right">
          <div class="item_right_top">
            <h3>{{item.original_title}}</h3>
            <span>{{item.rating.average}}</span>
          </div>
          <div class="time">年份: {{item.year}}</div>
          <div class="author">导演: {{item.directors[0].name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const MOVIE_URL = 'http://t.yushu.im/v2/movie/top250'
export default {
  data(){
    return {
      movieList:[],
      mydata:"hello"
    }
  },
  methods: {
    toMovieDetail(index){
      wx.navigateTo({ 
        url:"/pages/movieDetail/main?index="+index
       });
    }
  },
  beforeMount() {
    let that = this
    this.$fly.get(MOVIE_URL)
  .then(function (response) {
    // console.log(response);
    that.movieList = response.data.subjects
    that.$store.dispatch('getMoviesArr',that.movieList)
  })
  .catch(function (error) {
    console.log(error);
  });
  },
};
</script>
<style scoped>
.movie_list_item {
  height: 150rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  border-bottom:1rpx solid #ccc;
}
.item_left {
  width: 150rpx;
  height: 150rpx;
}
.item_left img {
  width: 100%;
  height: 100%;
}

.item_right {
  flex: 1;
  height:100%;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.item_right_top {
  display: flex;
  justify-content: space-between;
}
.item_right_top h3{
  display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.item_right_top span {
  font-size: 40rpx;
  color: #f00;
  font-weight: 700;
}
</style>
